<!DOCTYPE html>
<html lang="zxx">
  <head>
    <title>登陆</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <meta
      name="keywords"
      content="Report Login Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"
    />
    <!-- //Meta tag Keywords -->
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap"
      rel="stylesheet"
    />
    <!--/Style-CSS -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <!--//Style-CSS -->

    <link
      rel="stylesheet"
      href="css/font-awesome.min.css"
      type="text/css"
      media="all"
    />
  </head>

  <body>
    <!-- form section start -->
    <section class="w3l-hotair-form">
      <h1>用户登陆</h1>
      <div class="container">
        <!-- /form -->
        <div class="workinghny-form-grid">
          <div class="main-hotair">
            <div class="content-wthree">
              <h2>登陆</h2>
              <form action="#" method="post">
                <input
                  type="text"
                  class="text"
                  name="text"
                  placeholder="User Name"
                  required=""
                  autofocus
                  id="username"
                />
                <input
                  type="password"
                  class="password"
                  name="password"
                  placeholder="User Password"
                  required=""
                  autofocus
                  id="password"
                />
                <button class="btn" type="button" id="login">登陆</button>
              </form>

              <p class="account">没有账号? <a href="#signup">注册</a></p>
            </div>
            <div class="w3l_form align-self">
              <div class="left_grid_info">
                <img src="images/1.png" alt="" class="img-fluid" />
              </div>
            </div>
          </div>
        </div>
        <!-- //form -->
      </div>
      <!-- copyright-->
      <div class="copyright text-center">
        <p class="copy-footer-29">© 2025 数媒2351. 版权所有</p>
      </div>
      <!-- //copyright-->
    </section>
    <!-- //form section start -->

    <script>
      document.getElementById("login").addEventListener("click", function () {
        //1.获取用户信息
        const user = {
          username: document.getElementById("username").value,
          password: document.getElementById("password").value,
        };
        data = {
          action: "login",
          ...user,
        };
        console.log("eee", data);

        //2.  把用户信息发送给login.php
        fetch("http://localhost:7009/login.php", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: new URLSearchParams(data),
        })
          .then((res) => res.json())
          .then((data) => {
            console.log(data);

            if (data.code > 0) {
              alert("登陆成功");
            } else {
              alert("用户名或者密码错误");
            }
          })
          .catch((error) => {
            console.error("请求错误：", error);
          });
      });
    </script>
  </body>
</html>
